<template>
	<div>
		<van-nav-bar :title="title" :fixed="true" left-arrow @click-left="onClickLeft" />

		<van-grid :border="false" :column-num="2">
			<van-grid-item :gutter="10" v-for="item in list" @click="tap(item._id)" class="sp">
				<van-image :src="item.coverImg" />
				<div class="desc">
					<p class="name">{{item.name}}</p>
					<p class="price"> ￥ {{item.price}}</p>
					<van-icon name="shopping-cart-o" class="gw" @click.stop="add(item._id)" />
				</div>
			</van-grid-item>
		</van-grid>

		<p class="iconfont icon-wpicon-shangjiantou" v-if="scrollY" @click="backTop"></p>
	</div>
</template>

<script>
	import * as api from '../api/getProlist'
	export default {
		name: "Fashion",
		data() {
			return {
				title: "五色糖潮品",
				list: [],
				scrollY:''
			}
		},
		mounted() {
			this.$emit('toparent', this.title)
			window.addEventListener('scroll', this.scrollToTop)
			api.getProlist({
				per: 80,
				page: 1,
				name: '服饰',
				product_category: [],
			}).then((data) => {
				this.list = data.data.products
			})
		},
		destroyed () {
		  window.removeEventListener('scroll', this.scrollToTop)
		},

		
		methods: {
			// 点击回到顶部方法，加计时器是为了过渡顺滑
			  backTop () {
			    const that = this
			    let timer = setInterval(() => {
			      let ispeed = Math.floor(-that.scrollTop / 5)
			      document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
			      if (that.scrollTop === 0) {
			        clearInterval(timer)
			      }
			    }, 16)
			},
			// 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
			  scrollToTop () {
			    const that = this
			    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
			    that.scrollTop = scrollTop
			    if (that.scrollTop > 200) {
			      that.scrollY = true
			    } else {
			      that.scrollY = false
			    }
			  },
			
			onClickLeft() {
				this.$router.go(-1)
			},
			tap(id) {
				console.log(id)
				this.$router.push('/detail/' + id)
			},
			add(id) {
				console.log(id)
				if (!localStorage.getItem('token')) {
					this.$toast('请先登录')
					this.$router.push('/login')
				} else {
					api.getAddcart({
						product: id,
						quantity: 1,
					}).then((data) => {
						console.log(data)
						console.log(id)
						this.$toast('加入购物车成功')
					})
				}
			}
		},
	}
</script>

<style scoped="">
	.icon-wpicon-shangjiantou {
		font-size: 20px;
		position: fixed;
		bottom: 20px;
		right: 30px;
		color: #fff;
		text-align: center;
		line-height: 30px;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background: #666;
		opacity: 0.7;
	}

	.van-nav-bar__title {
		color: #fff;
		font-size: 14px;
	}

	.van-nav-bar {
		height: 46px;
		background: #d46170;
	}

	.van-icon,
	.van-icon::before {
		color: #FFF;
		font-size: 12px;
	}

	.van-grid {
		margin-top: 46px;
	}

	.van-search__content {
		width: 293px;
		height: 25px;
	}

	.van-image {
		width: 152px;
		height: 152px;
	}

	.gw {
		font-size: 16px;
		width: 24px;
		height: 24px;
		border: 1px solid #d5616e;
		border-radius: 50%;
		text-align: center;
		line-height: 24px;
		background: #d5616e;
		color: #efd1d1;
		position: absolute;
		right: 13px;
		bottom: 20px;
	}

	.price {
		color: #d88694;
		font-size: 12px;
	}

	.name {
		width: 130px;
	}

	.sp {
		border-right: 2px solid #f9f9f9;
		border-bottom: 2px solid #f9f9f9;
	}
</style>
